<template>
  <div>
    <u-action-sheet :list="list" v-model="show" @click="click"></u-action-sheet>
    <div class="card-back"></div>
    <view class="card-top">
      <u-icon :name="item.name" color="#366DF6" size="80" :label="item.text" label-pos="bottom" margin-top="20" label-color="black" v-for="(item, index) in topIconList" :key="index" @click="goDetail(item.path)"></u-icon>
    </view>
    <view class="card-center">
      <text>常用功能</text>
      <u-icon name="setting" color="#366DF6" size="40" label="配置" label-pos="left" margin-top="20" label-color="black" @click="set"></u-icon>
    </view>
    <view class="card-bottom">
      <span class="card" v-for="(item, index) in iconList" :key="index">
        <u-icon @click="goDetail(item.path)" :name="item.name" color="#366DF6" size="80" :label="item.text" label-pos="bottom" margin-top="10" label-color="black"></u-icon>
      </span>
    </view>
    <div class="wrapper">
      <!----业绩指标完成率模块---->
      <div class="clockDialContainer">
        <div class="header">
          <div class="title">
            <u-icon name="moments" color="orange"></u-icon>
            业绩指标完成率(回款金额)
          </div>
          <div class="select" @click="showPopup(true)">
            {{ currentItemName }}
            <u-icon name="arrow-down"></u-icon>
          </div>
        </div>
        <!------仪表图------>
        <view class="qiun-columns">
          <view class="qiun-charts">
            <!--#ifndef MP-ALIPAY -->
            <canvas canvas-id="canvasGauge" id="canvasGauge" class="charts"></canvas>
            <!--#endif-->
          </view>
          <!---目标金额-->
          <view class="cash">
            <text class="top">目标金额</text>
            <text>0.00元</text>
          </view>
          <!---回款金额-->
          <view class="cash refund">
            <text class="top">回款金额</text>
            <text>0.00元</text>
          </view>
        </view>
      </div>
      <!------排行榜------>
      <div class="clockDialContainer">
        <div class="header">
          <div class="title">
            <u-icon name="moments" color="orange"></u-icon>
            排行榜
          </div>
          <div class="select" @click="showOrderPopup(true)">
            {{ currentOrderName }}
            <u-icon name="arrow-down"></u-icon>
          </div>
        </div>
      </div>

      <!---弹出层order组件-->
      <PopupOptions @closePopup="closePopup" @changeOrderItemName="changeOrderItemName" :modifyText="`changeOrderItemName`" :options="options" :show="isShowOrder" />
      <!---弹出层组件-->
      <PopupOptions @closePopup="closePopup" @changeItemName="changeItemName" :modifyText="`changeItemName`" :options="options" :show="isShowRefund" />
    </div>
    <!----toast 提示组件--->
    <u-toast ref="uToast" />
  </div>
</template>

<script>
//引入弹出层组件
import PopupOptions from '../../components/PopupOptions/index.vue'
//uCharts相关
import uCharts from '../../components/u-charts/u-charts.js'
var _self
var canvasObj = {}

export default {
  components: {
    PopupOptions,
  },
  data() {
    return {
      //
      //top导航栏icon图标数组
      topIconList: [
        {
          name: 'home', //icon 的图标名字
          text: '建客户', //icon图标的文本
        },
        {
          name: 'rmb', //icon 的图标名字
          text: '建商机', //icon图标的文本
        },
        {
          name: 'chat', //icon 的图标名字
          text: '发任务', //icon图标的文本
        },
        {
          name: 'edit-pen', //icon 的图标名字
          text: '写日志', //icon图标的文本
        },
      ],
      //常用功能icon图标的数组
      iconList: [
        {
          name: 'account', //icon 的图标名字
          text: '客户', //icon图标的文本
          path: '/pages/customer/index',
        },
        {
          name: 'rmb-circle', //icon 的图标名字
          text: '商机', //icon图标的文本
          path: '/pages/business/index',
        },
        {
          name: 'file-text', //icon 的图标名字
          text: '任务', //icon图标的文本
          path: '/pages/task/index',
        },
        {
          name: 'file-text-fill', //icon 的图标名字
          text: '日志', //icon图标的文本
        },
        {
          name: 'phone', //icon 的图标名字
          text: '联系人', //icon图标的文本
          path: '/pages/contacts/index',
        },
        {
          name: 'bookmark-fill', //icon 标名字
          text: '合同', //icon图标的文本
          path: '/pages/contract/index',
        },
        {
          name: 'rmb-circle-fill', //icon 的图标名字
          text: '回款', //icon图标的文本
          path: '/pages/collection/index',
        },
        {
          name: 'shopping-cart', //icon 的图标名字
          text: '产品', //icon图标的文本
          path: '/pages/product/index',
        },
      ],
      //配置弹出框的配置数组
      list: [
        // {text: '点赞',color: 'blue',fontSize: 28,subText: '感谢您的点赞'},
        { text: '快速入口设置' },
        { text: '常用功能设置' },
      ],
      //配置弹出框的标识
      show: false,
      //
      gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
      cWidth: '', //设置仪表的宽度
      cHeight: '', //设置仪表的高度
      pixelRatio: 1, //设备的比率
      //存放popup 数据
      options: [],

      //是否显示仪表盘popup
      isShowRefund: false,
      isShowOrder: false,
      //存放默认的文字
      currentItemName: '回款金额',
      //存放排行榜文字
      currentOrderName: '回款金额',
    }
  },
  onLoad() {
    _self = this
    //#ifdef MP-ALIPAY
    uni.getSystemInfo({
      success: function (res) {
        if (res.pixelRatio > 1) {
          //正常这里给2就行，如果pixelRatio=3性能会降低一点
          //_self.pixelRatio =res.pixelRatio;
          _self.pixelRatio = 2
        }
      },
    })
    //#endif

    this.cWidth = uni.upx2px(640)

    this.cHeight = uni.upx2px(480)
    this.gaugeWidth = uni.upx2px(30)

    //this.fillData(Data);
  },
  onReady() {
    this.showGauge('canvasGauge')
  },
  methods: {
    set() {
      this.show = true
    },
    click(index) {
      console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
    },
    //页面跳转
    goDetail(path) {
      console.log(path)
      if (path) {
        if (path === '/pages/contacts/index' || path === '/pages/contract/index') {
          wx.switchTab({
            url: path,
          })
        } else {
          wx.navigateTo({
            url: path,
          })
        }

        return
      }
      this.$refs.uToast.show({
        title: '功能开发中',
        type: 'warn',
      })
    },

    //关闭弹窗
    closePopup() {
      this.isShowRefund = false
      this.isShowOrder = false
    },
    //是否展示仪表盘popup
    showPopup() {
      this.isShowRefund = true
      //初始化数据
      this.options = [
        {
          id: 0,
          name: '回款金额',
        },
        {
          id: 1,
          name: '合同金额',
        },
      ]
    },
    //是否显示orderPopup
    showOrderPopup() {
      this.isShowOrder = true
      //初始化数据
      this.options = [
        {
          id: 0,
          name: '回款金额',
        },
        {
          id: 1,
          name: '合同金额',
        },
        {
          id: 2,
          name: '合同数',
        },
        {
          id: 3,
          name: '新增客户',
        },
        {
          id: 4,
          name: '新增联系人',
        },
      ]
    },
    //更改仪表盘里的选项文字
    changeItemName(name) {
      this.currentItemName = name
    },
    //更改order的选项文字
    changeOrderItemName(name) {
      this.currentOrderName = name
    },
    //展示仪表盘
    showGauge(canvasId) {
      //初始化数据
      let chartData = {
        categories: [
          {
            color: '#f87875',
            value: 0.2,
            _endAngle_: 1.05,
            _startAngle_: 0.75,
          },
          {
            color: '#fccd57',
            value: 0.8,
            _endAngle_: 1.9500000000000002,
            _startAngle_: 1.05,
          },
          {
            color: '#47e78d',
            value: 1,
            _endAngle_: 0.25,
            _startAngle_: 1.9500000000000002,
          },
        ],
        series: [
          {
            color: '#5f7a86',
            //设置完成率指标 0-1之间的数字  1为100%
            data: 0,
            legendShape: 'circle',
            //设置标题
            name: '完成率',
            pointShape: 'circle',
            show: true,
            type: 'gauge',
            _endAngle_: 1.74,
            _oldAngle_: 0.75,
            _proportion_: 1.74,
          },
        ],
      }

      canvasObj[canvasId] = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: 'gauge',
        fontSize: 11,
        title: {
          name: Math.round(chartData.series[0].data * 100) + '%',
          color: '#4f4f4f',
          fontSize: 25 * _self.pixelRatio,
          offsetY: 50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
        },
        subtitle: {
          name: chartData.series[0].name,
          color: '#666666',
          fontSize: 15 * _self.pixelRatio,
          offsetY: -50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
        },

        extra: {
          gauge: {
            type: 'default',
            width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度
            startAngle: 0.75,
            endAngle: 0.25,
            startNumber: 0,
            endNumber: 100,
            //刻度参数设置
            splitLine: {
              fixRadius: 0,
              splitNumber: 10,
              width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度
              color: '#FFFFFF',
              childNumber: 5,
              childWidth: _self.gaugeWidth * 0.4 * _self.pixelRatio, //仪表盘背景的宽度
            },
            //指针参数设置
            pointer: {
              width: _self.gaugeWidth * 0.8 * _self.pixelRatio, //指针宽度
              color: '#6281a7',
            },
          },
        },
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        dataLabel: true,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
body {
  background-color: #f3f5fd;
  .card-back {
    width: 100%;
    height: 100upx;
    background-color: #366df6;
    position: absolute;
    z-index: -1;
  }
  .card-top {
    width: 90%;
    height: 200upx;
    background: #fff;
    border-radius: 25upx;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    padding-left: 80upx;
    box-shadow: 1px 1px 6px #ccc;
    u-icon {
      flex: 1;
    }
  }
  .card-center {
    margin: 30upx 50upx;
    height: 60upx;
    line-height: 60upx;
    text {
      font-size: 30upx;
      font-weight: 700;
      float: left;
    }
    u-icon {
      float: right;
      background-color: #fff;
      border-radius: 10upx;
      width: 110upx;
      padding-left: 40upx;
      height: 60upx;
      margin-top: 10upx;
      box-shadow: 1px 1px 3px #ccc;
    }
  }
  .card-bottom {
    width: 90%;
    margin: 0 auto;
    .card {
      display: inline-block;
      background: #fff;
      border-radius: 10px;
      width: 22%;
      height: 150upx;
      text-align: center;
      line-height: 150upx;
      margin-bottom: 15upx;
      margin-left: 15upx;
      box-shadow: 1px 1px 6px #ccc;
    }
  }
  .wrapper {
    width: 93%;
    margin: 0 auto;

    //业绩指标完成率
    .clockDialContainer {
      width: 100%;
      height: 650rpx;
      margin-top: 30rpx;
      padding: 36rpx 20rpx;
      border-radius: 20rpx;
      box-shadow: 1px 2px 10px #ddd;
      font-size: 28rpx;
      background-color: #fff;
      color: #050505;
      box-sizing: border-box;
      .header {
        display: flex;
        justify-content: space-between;
        .title {
          font-weight: bold;
          u-icon {
            margin-right: 10rpx;
            width: 30rpx;
            height: 30rpx;
          }
        }
        .select {
          padding: 7rpx 15rpx;
          background-color: #f6f6f6;

          margin-top: -6rpx;
          u-icon {
            margin-left: 18rpx;
          }
        }
      }
      .qiun-columns {
        position: relative;
        padding-top: 50rpx;
        .qiun-charts {
          .charts {
            width: 600rpx;
            height: 500rpx;
          }
        }
        //目标金额与回款金额
        .cash {
          position: absolute;
          bottom: 20rpx;
          display: flex;
          flex-direction: column;
          left: 120rpx;
          font-size: 22rpx;
          width: 100rpx;
          text-align: center;
          color: #000;
          .top {
            color: #767676;
          }
        }
        .refund {
          left: 410rpx;
        }
      }
    }
  }
}
</style>
